<template>
  <div class="cq-ssc" v-if="!getIsPhone">
    <select-number-public
      :options="options"
      :winningInfo="winningInfo"
      :currentLottery="getLotteryType.lotteryName"
      @mutate="handleMutate"
      >
      <template v-slot:winninginfo>
        <winning-numbers :winningNumbers="winningNumbers">
          <winning-info-ssc :winningNumbers="winningNumbers"></winning-info-ssc>
        </winning-numbers>
      </template>
      <transition name="fade" mode="out-in">
        <component :is="getCurrentComponent"></component>
      </transition>
    </select-number-public>
  </div>
  <div v-else class="cqssc-phone">
    <div class="fixed-top">
      <winning-numbers :winningNumbers="winningNumbers">
        <span class="number border-right" v-for="(number, index) in winningNumbers.previous.numbers.split(',')" :key="index">{{number}}</span>
      </winning-numbers>
      <sub-dropdown-phone @click="updateSwitchIndex" :activeSwitchIndex="activeSwitchIndex"></sub-dropdown-phone>
    </div>
    <transition name="fade" mode="out-in">
      <component :is="getCurrentComponent" :activeSwitchIndexPhone="activeSwitchIndex"></component>
    </transition>
    <side-slider-phone :options="options" @click="handleMutate"></side-slider-phone>
  </div>
</template>

<script>
import SelectNumberPublic from '@/components/select-number-public/select-number-public'
import WinningNumbers from '@/components/winning-numbers/winning-numbers'
import WinningInfoSsc from '@/components/winning-info/winning-info-ssc'
import fushi from '@/components/lottery-type/shishicai/wuxing/fushi'
import danshi from '@/components/lottery-type/shishicai/wuxing/danshi'
import qszxfushi from '@/components/lottery-type/shishicai/qiansan/zhixuan/fushi'
import hezhi from '@/components/lottery-type/shishicai/qiansan/zhixuan/hezhi'
import zhixuanrenerfushi from '@/components/lottery-type/shishicai/renxuan/renerfushi'
import renerhezhi from '@/components/lottery-type/shishicai/renxuan/renerhezhi'
import zuxuanrenerfushi from '@/components/lottery-type/shishicai/renxuan/zuxuan/renerfushi'
import liangmian from '@/components/lottery-type/shishicai/xinyongwanfa/liangmian'
import baijiale from '@/components/lottery-type/shishicai/teshu/baijiale'
import qianerdaxiaodanshuang from '@/components/lottery-type/shishicai/teshu/qianerdaxiaodanshuang'
import baozi from '@/components/lottery-type/shishicai/teshu/baozi'
import tema from '@/components/lottery-type/shishicai/xinyongwanfa/tema'
import longhuhe from '@/components/lottery-type/shishicai/xinyongwanfa/longhuhe'
import SideSliderPhone from '@/components/base/phone/side-slider-phone/side-slider-phone'
import SubDropdownPhone from '@/components/base/phone/sub-dropdown-phone/sub-dropdown-phone'

import { mapGetters, mapMutations } from 'vuex'

export default {
  components: {
    SelectNumberPublic,
    WinningNumbers,
    WinningInfoSsc,
    fushi,
    danshi,
    tema,
    longhuhe,
    qszxfushi,
    hezhi,
    zhixuanrenerfushi,
    renerhezhi,
    zuxuanrenerfushi,
    liangmian,
    baijiale,
    qianerdaxiaodanshuang,
    baozi,
    SideSliderPhone,
    SubDropdownPhone,
  },
  data() {
    return {
      activeSwitchIndex: 0,
       // 开奖号码
      winningNumbers: {
        id: 'cqssc',
        lotteryName: '重庆时时彩',
        dateNo: '819048',
        previous: {
          dateNo: '819047',
          numbers: '1,2,3,4,5',
          context: '龙，虎，单，双，全',
        },
        currentComponent: 'WinningInfoSsc',
        closeTime: new Date().getTime() + 100000000,
        drawTime: new Date().getTime() + 1000000000
      },
      // 前10期中奖信息
      winningInfo: [
        { 
          id: 1,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 2,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 3,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 4,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 5,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 6,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 7,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 8,
          series: 819049,
          numbers: '1,2,3,4,5'
        },
        {
          id: 9,
          series: 819049,
          numbers: '1,2,3,4,5'
        }
      ],
      // 重庆时时彩tab选项数据
      options: [
        {
          id: 'xy_wf',
          context: '信用玩法',
          currentComponent: 'tema',
          currentSubTab: '特码',
          currentSubId: 'tema',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'tema',
                  context: '特码',
                  components: 'tema',
                },
                {
                  id: 'l_m',
                  context: '两面',
                  components: 'liangmian',
                },
                {
                  id: 'l_h_h',
                  context: '龙虎和',
                  components: 'longhuhe',
                }
              ]
            }
          ]
        },
        {
          id: 'd_w_d',
          context: '定位胆',
          currentComponent: '',
          currentSubTab: '冠亚军',
          currentSubId: 5,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 5,
                  context: '冠亚军',
                  components: ''
                },
              ]
            }
          ]
        },
        {
          id: 'e_x',
          context: '二星',
          currentComponent: '',
          currentSubTab: '前三',
          currentSubId: 6,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 6,
                  context: '前三',
                  components: '',
                },
              ]
            }
          ]
        },
        {
          id: 'r_x',
          context: '任选',
          currentComponent: 'zhixuanrenerfushi',
          currentSubTab: '任二复式',
          currentSubId: 'zx_re_fs',
          sub: [
            {
              cate: '直选',
              tabnames: [
                {
                  id: 'zx_re_fs',
                  context: '任二复式',
                  components: 'zhixuanrenerfushi',
                },
                {
                  id: 'zx_re_ds',
                  context: '任二单式',
                  components: '',
                },
                {
                  id: 'zx_re_hz',
                  context: '任二和值',
                  components: 'renerhezhi',
                },
                {
                  id: 10,
                  context: '任三复式',
                  components: '',
                },
                {
                  id: 11,
                  context: '任三单式',
                  components: '',
                },
              ]
            },
            {
              cate: '组选',
              tabnames: [
                {
                  id: 'zu_x_re_fs',
                  context: '任二复式',
                  components: 'zuxuanrenerfushi'
                },
                {
                  id: 13,
                  context: '任三组三单式',
                  components: 'rensanzusandanshi'
                }
              ]
            }
          ],
        },
        {
          id: 'h_s',
          context: '后三',
          currentComponent: 'liangmian',
          currentSubTab: '两面',
          currentSubId: 14,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 14,
                  context: '两面',
                  active: true,
                  components: 'liangmian'
                },
                {
                  id: 15,
                  context: '龙虎',
                  components: 'longhu'
                },
                {
                  id: 16,
                  context: '特码',
                  components: 'tema'
                },
                {
                  id: 17,
                  context: '冠亚和值',
                  components: 'guanyahezhi',
                  // components: 'default'
                },
                {
                  id: 18,
                  context: '冠亚组合',
                  components: 'guanyazuhe'
                },
              ]
            }
          ]
        },
        {
          id: 'z_s',
          context: '中三',
          currentComponent: 'tema',
          currentSubTab: '冠亚军',
          currentSubId: 19,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 19,
                  context: '冠亚军',
                },
              ]
            }
          ]
        },
        {
          id: 'q_s',
          context: '前三',
          currentComponent: 'qszxfushi',
          currentSubTab: '复式',
          currentSubId: 'qs_zx_fs',
          sub: [
            {
              cate: '直选',
              tabnames: [
                {
                  id: 'qs_zx_fs',
                  context: '复式',
                  components: 'qszxfushi'
                },
                {
                  id: 'qs_zx_ds',
                  context: '单式',
                  components: ''
                },
                {
                  id: 'qs_zx_hz',
                  context: '和值',
                  components: 'hezhi'
                },
             ]
            },
            {
              cate: '组选',
              tabnames: [
                {
                  id: 23,
                  context: '组三复式',
                  components: 'zusanfushi'
                },
                {
                  id: 24,
                  context: '组三单式',
                  components: ''
                },
                {
                  id: 25,
                  context: '组六复式',
                  components: ''
                },
                {
                  id: 26,
                  context: '组六单式',
                  components: ''
                },
                {
                  id: 27,
                  context: '和值',
                  components: ''
                },
             ]
            },
            {
              cate: '特殊',
              tabnames: [
                {
                  id: 28,
                  context: '混合',
                  components: ''
                }
              ]
            }
          ]
        },
        {
          id: 's_x',
          context: '四星',
          currentComponent: 'shiweizhixuan',
          currentSubTab: '十位直选',
          currentSubId: 29,
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 29,
                  context: '十位直选',
                  components: '',
                }
              ]
            }
          ]
        },
        {
          id: 'w_x',
          context: '五星',
          currentComponent: 'fushi',
          currentSubTab: '复式',
          currentSubId: 'zx_fs',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'zx_fs',
                  context: '复式',
                  active: true,
                  components: 'fushi'
                },
                {
                  id: 'zx_ds',
                  context: '单式',
                  components: 'danshi'
                },
              ]
            }
          ]
        },
        {
          id: 'ts_wf',
          context: '特殊玩法',
          currentComponent: 'qianerdaxiaodanshuang',
          currentSubTab: '前二大小单双',
          currentSubId: 'qr_dx_ds',
          sub: [
            {
              cate: '玩法',
              tabnames: [
                {
                  id: 'qr_dx_ds',
                  context: '前二大小单双',
                  active: true,
                  components: 'qianerdaxiaodanshuang'
                },
                {
                  id: 'b_j_l',
                  context: '百家乐',
                  components: 'baijiale'
                },
                {
                  id: 'b_z',
                  context: '豹子',
                  components: 'baozi'
                },
              ]
            }
          ]
        }
      ],
    }
  },
  created() {
    this.setLotteryType({lotteryName: this.winningNumbers.lotteryName, id: this.winningNumbers.id})
    this.setCurrentLotteryDateNo(this.winningNumbers.dateNo)
    this.setCurrentSubId(this.options[0].currentSubId)
    this.setCurrentComponent(this.options[0].currentComponent)
    this.setCurrentMainTab({mainTabName: this.options[0].context, id: this.options[0].id })
    this.setCurrentTab({subTabName: this.options[0].currentSubTab, id: this.options[0].currentSubId})
  },
  methods: {
    handleMutate(options) {
      this.options = options
    },
    updateSwitchIndex(index) {
      this.activeSwitchIndex = index
    },
    ...mapMutations('lottery', {
      setLotteryType: 'SET_LOTTERY_TYPE',
      setCurrentComponent: 'SET_CURRENT_COMPONENT',
      setCurrentMainTab: 'SET_CURRENT_MAIN_TAB',
      setCurrentTab: 'SET_CURRENT_TAB',
      setCurrentLotteryDateNo: 'SET_CURRENT_LOTTERY_DATE_NO',
      setCurrentSubId: 'SET_CURRENT_SUB_ID'
    }),
  },
  computed: {
    ...mapGetters('lottery', [
      'getCurrentComponent',
      'getIsPhone',
      'getLotteryType'
    ])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  &.fade-enter, &.fade-leave-to 
    opacity 0
  &.fade-leave, &.fade-enter-to 
    opacity 1
  &.fade-enter-active, &.fade-leave-active 
    transition all 0.2s 
  @media screen and (max-width 750px) 
    .cqssc-phone 
      width 100%
      box-sizing border-box
      padding-top 148px
      // padding-bottom 50px
      .fixed-top 
        position fixed 
        top 48px 
        left 0 
        right 0 
        z-index 9
        background #fff
        .number 
          display inline-block
          width 25px
          height 10px
          line-height 10px
          text-align center
          font-size 16px 
          font-weight 700
          font-family $sub-font-family
          color $color-theme-red 
</style>